<% content_for :application do %>
<link rel="stylesheet" href="/amstockchart/amcharts/style.css" type="text/css">
<script src="/amstockchart/amcharts/amcharts.js" type="text/javascript"></script>
<script src="/amstockchart/amcharts/gauge.js" type="text/javascript"></script>
<script src="/amstockchart/amcharts/serial.js" type="text/javascript"></script>
<script src="/amstockchart/amcharts/themes/black.js" type="text/javascript"></script>
<script src="/amstockchart/amcharts/themes/light.js" type="text/javascript"></script>
<script src="/amstockchart/amcharts/themes/dark.js" type="text/javascript"></script>
<script src="/amstockchart/amcharts/themes/chalk.js" type="text/javascript"></script>
<script>

    var countData = [];
    var maxusetimeData = [];
    var avgusetimeData = [];
    var maxesblogicusetimeData = [];

	/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    var countChart = AmCharts.makeChart("countchartdiv", {
        type: "serial",
        theme: "light",
        // setting language to German
        language: "de",

        dataProvider: countData,
        categoryField: "date",
        categoryAxis: {
            parseDates: false,
            gridAlpha: 0.15,
            minorGridEnabled: true,
            labelsEnabled:false,
            //axisColor: "#DADADA"
        },
        valueAxes: [{
            axisAlpha: 0.2,
            id: "v1"
        }],
        graphs: [{
            title: "red line",
            id: "g1",
            valueAxis: "v1",
            valueField: "requests",
            bullet: "round",
            bulletBorderColor: "#FFFFFF",
            bulletBorderAlpha: 1,
            lineThickness: 2,
            lineColor: "#b5030d",
            negativeLineColor: "#0352b5",
            hideBulletsCount:30,
            balloonText: "[[category]]<br><b><span style='font-size:14px;'>value: [[value]]</span></b>"
        }],
        chartCursor: {
            fullWidth:true,
            cursorAlpha:0.1
        }
    });
    generateChartData(countData,countChart,"/api/tracking_log?server=<%= params[:server]%>&app=<%= params[:app]%>&field=count&count=200");
    setInterval(function() {
    $.getJSON("/api/tracking_log?server=<%= params[:server]%>&app=<%= params[:app]%>&field=count&count=1",function(result){

            if(new Date(result[0].date) - countData[countData.length - 1].date > 0){
                countData.push({
                    date: new Date(result[0].date),
                    requests: result[0].value
                });
                countData.shift();
                countChart.validateData();
            }
            
      });
    }, 3000);


    /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    var maxusetimeChart = AmCharts.makeChart("maxusetimechartdiv", {
        type: "serial",
        theme: "light",
        // setting language to German
        language: "de",

        dataProvider: maxusetimeData,
        categoryField: "date",
        categoryAxis: {
            parseDates: false,
            gridAlpha: 0.15,
            minorGridEnabled: true,
            labelsEnabled:false,
            axisColor: "#DADADA"
        },
        valueAxes: [{
            axisAlpha: 0.2,
            id: "v1"
        }],
        graphs: [{
            title: "red line",
            id: "g1",
            valueAxis: "v1",
            valueField: "requests",
            bullet: "round",
            bulletBorderColor: "#FFFFFF",
            bulletBorderAlpha: 1,
            lineThickness: 2,
            lineColor: "#b5030d",
            negativeLineColor: "#0352b5",
            hideBulletsCount:30,
            balloonText: "[[category]]<br><b><span style='font-size:14px;'>value: [[value]]</span></b>"
        }],
        chartCursor: {
            fullWidth:true,
            cursorAlpha:0.1
        },

    });
    generateChartData(maxusetimeData,maxusetimeChart,"/api/tracking_log?server=<%= params[:server]%>&app=<%= params[:app]%>&field=maxusetime&count=200");
    setInterval(function() {
    $.getJSON("/api/tracking_log?server=<%= params[:server]%>&app=<%= params[:app]%>&field=maxusetime&count=1",function(result){

            if(new Date(result[0].date) - maxusetimeData[maxusetimeData.length - 1].date > 0){
                maxusetimeData.push({
                    date: new Date(result[0].date),
                    requests: result[0].value
                });
                maxusetimeData.shift();
                maxusetimeChart.validateData();
            }
            
      });
    }, 3000);

    /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    var avgusetimeChart = AmCharts.makeChart("avgusetimechartdiv", {
        type: "serial",
        theme: "light",
        // setting language to German
        language: "de",

        dataProvider: avgusetimeData,
        categoryField: "date",
        categoryAxis: {
            parseDates: false,
            gridAlpha: 0.15,
            minorGridEnabled: true,
            labelsEnabled:false,
            axisColor: "#DADADA"
        },
        valueAxes: [{
            axisAlpha: 0.2,
            id: "v1"
        }],
        graphs: [{
            title: "red line",
            id: "g1",
            valueAxis: "v1",
            valueField: "requests",
            bullet: "round",
            bulletBorderColor: "#FFFFFF",
            bulletBorderAlpha: 1,
            lineThickness: 2,
            lineColor: "#b5030d",
            negativeLineColor: "#0352b5",
            hideBulletsCount:30,
            balloonText: "[[category]]<br><b><span style='font-size:14px;'>value: [[value]]</span></b>"
        }],
        chartCursor: {
            fullWidth:true,
            cursorAlpha:0.1
        },

    });
    //proxy
    generateChartData(avgusetimeData,avgusetimeChart,"/api/tracking_log?server=<%= params[:server]%>&app=<%= params[:app]%>&field=avgusetime&count=200");
    setInterval(function() {
    $.getJSON("/api/tracking_log?server=<%= params[:server]%>&app=<%= params[:app]%>&field=avgusetime&count=1",function(result){

            if(new Date(result[0].date) - avgusetimeData[avgusetimeData.length - 1].date > 0){
                avgusetimeData.push({
                    date: new Date(result[0].date),
                    requests: result[0].value
                });
                avgusetimeData.shift();
                avgusetimeChart.validateData();
            }
            
      });
    }, 3000);

    /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    var maxesblogicusetimeChart = AmCharts.makeChart("maxesblogicusetimechartdiv", {
        type: "serial",
        theme: "light",
        // setting language to German
        language: "de",

        dataProvider: maxesblogicusetimeData,
        categoryField: "date",
        categoryAxis: {
            parseDates: false,
            gridAlpha: 0.15,
            minorGridEnabled: true,
            labelsEnabled:false,
            axisColor: "#DADADA"
        },
        valueAxes: [{
            axisAlpha: 0.2,
            id: "v1"
        }],
        graphs: [{
            title: "red line",
            id: "g1",
            valueAxis: "v1",
            valueField: "requests",
            bullet: "round",
            bulletBorderColor: "#FFFFFF",
            bulletBorderAlpha: 1,
            lineThickness: 2,
            lineColor: "#b5030d",
            negativeLineColor: "#0352b5",
            hideBulletsCount:30,
            balloonText: "[[category]]<br><b><span style='font-size:14px;'>value: [[value]]</span></b>"
        }],
        chartCursor: {
            fullWidth:true,
            cursorAlpha:0.1
        },

    });
    //proxy
    generateChartData(maxesblogicusetimeData,maxesblogicusetimeChart,"/api/tracking_log?server=<%= params[:server]%>&app=<%= params[:app]%>&field=maxesblogicusetime&count=200");
    setInterval(function() {
    $.getJSON("/api/tracking_log?server=<%= params[:server]%>&app=<%= params[:app]%>&field=maxesblogicusetime&count=1",function(result){

            if(new Date(result[0].date) - maxesblogicusetimeData[maxesblogicusetimeData.length - 1].date > 0){
                maxesblogicusetimeData.push({
                    date: new Date(result[0].date),
                    requests: result[0].value
                });
                maxesblogicusetimeData.shift();
                maxesblogicusetimeChart.validateData();
            }
            
      });
    }, 3000);






    // generate some random data, quite different range
    function generateChartData(chartData,chart,dataUrl) {
	  $.getJSON(dataUrl,function(result){
	    $.each(result, function(i, field){
	        chartData.push({
                date: new Date(field.date),
                requests: field.value
            });
            chartData.sort(function(x,y){
                                if(x.date > y.date) {
                                    return 1;
                                }
                                else{
                                    return -1;
                                }
                            });
	    });
        chart.validateData();
	  });
    }
    
</script>
<div class="row"> 
	<div>
		<div class="col-sm-12">
		    <div class="widget-container scrollBars boxed">
		        <h3 class="widget-title">COUNT</h3>
		        <div id="countchartdiv" style="width: 100%; height: 200px;"></div>
		    </div>
	    </div>
    </div>
</div>
<div class="row"> 
    <div class="col-sm-4">
	    <div class="widget-container scrollBars boxed">
	        <h3 class="widget-title">MAX USED TIME</h3>
	        <div id="maxusetimechartdiv" style="width: 100%; height: 200px;"></div>
	    </div>
    </div>
    <div class="col-sm-4">
	    <div class="widget-container scrollBars boxed">
	        <h3 class="widget-title">AVG USED TIME</h3>
	        <div id="avgusetimechartdiv" style="width: 100%; height: 200px;"></div>
	    </div>
    </div>
    <div class="col-sm-4">
	    <div class="widget-container scrollBars boxed">
	        <h3 class="widget-title">MAX ESB USED TIME</h3>
	        <div id="maxesblogicusetimechartdiv" style="width: 100%; height: 200px;"></div>
	    </div>
    </div>
</div>


<div class="widget-container widget-trade boxed">
    <div class="inner">
        <h6 class="trade-location"><a style="outline: medium none;" hidefocus="true" href="#">Request Log</a></h6>
        	<% @tracking.each do |t| %>
        		<% 
        		if t.statuscode >= 500
        			@licolor="red"
        		elsif t.statuscode !=200 and t.statuscode < 500
        			@licolor="yellow"
        		end
        		%>
                <ul class="stats-data clearfix">
            		<li class="first <%= @licolor%>"><a style="outline: medium none;" hidefocus="true" href="#"><strong><%= t.statuscode %></strong><span><%= t.usetime./(1000) %> ms</span></a></li>
    				<li class="<%= @licolor%>"><a style="outline: medium none;" hidefocus="true" href="#"><span><%= t.url %></span><span><%= t.invoketime.localtime %></span></a></li>
    				<li class="last <%= @licolor%>"><a style="outline: medium none;" hidefocus="true" href="#"><strong><%= t.realclientip %></strong><span><%= t.location %></span></a></li>
                </ul>
            <% end %>
        
        <div class="clear"></div>
    </div>
</div>
<% end %>